<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title th:text="${webConfig.webName}">首页</title>
    <meta name="description" th:content="${webConfig.webDes}">
    <meta th:content="${webConfig.webKeywords}" name="keywords"/>
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/static/swiper/swiper-3.4.2.min.css}">
    <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
    <script th:src="@{/static/jquery/jquery-3.4.1.min.js}"></script>
    <style>
        html, body {
            position: relative;
            height: 100%;
        }

        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .footer {
            width: 100%;
            height: 100px;
            line-height: 100px;
            background-color: #393D49;
            text-align: center;
            color: #ffffff;
        }

        .swiper-container {
            width: 100%;
            height: 100%;
            max-height: 438px;
            max-height: 790px;

        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-blockbox;
            display: -webkit-block;
            display: block;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .swiper-container2 {
            width: 100%;
            height: 400px;
            margin: 20px auto;
        }

        .swiper-p2 .img {
            overflow: hidden;
        }

        .swiper-p2 img {
            width: 100%;
            height: 300px;
            transition: all 0.6s;
        }

        .swiper-p2 img:hover {

            transform: scale(1.2); /* 放大1.2倍 */
        }


        .swiper-p2 .title {
            width: 100%;
            height: 30px;
            float: left;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-weight: bold;
            margin-top: 10px;
        }

        .swiper-p2 .buyMoney {
            width: 26%;
            height: 38px;
            float: left;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-weight: bold;
            margin-top: 10px;
            color: red;
            line-height: 38px;
        }

        .swiper-slide .buyBtn {
            width: 40%;
            height: 38px;
            float: right;
            margin-top: 10px;
        }

        .swiper-slide .delMoney {
            width: auto;
            height: 38px;
            float: left;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-weight: bold;
            margin-top: 10px;
            color: #C0C0C0;
            line-height: 38px;
            text-decoration: line-through;
            font-size: 18px;
        }

    </style>
</head>
<body>
<script th:src="@{/static/swiper/swiper-3.4.2.min.js}"></script>

<div th:replace="include :: header"></div>

<div class="layui-row layui-col-space10" style="max-width: 1200px; margin:20px auto;">
    <div class="layui-col-md12">
        <div class="layui-row grid-demo">
            <div class="layui-col-md8">
                <div class="swiper-container swiper-container1">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide swiper-p1"><img
                                src="http://www.yzipi.com/wp-content/themes/yzipi/images/wor.png" width="100%"></div>
                        <div class="swiper-slide swiper-p1"><img
                                src="http://www.yzipi.com/wp-content/uploads/2018/10/ef-1000x556.jpg" width="100%">
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination swiper-p1"></div>

                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev swiper-p1"></div>
                    <div class="swiper-button-next swiper-p1"></div>

                    <!-- 如果需要滚动条 -->
                    <div class="swiper-scrollbar swiper-p1"></div>
                </div>
            </div>
            <div class="layui-col-md4" style="">
                <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                    <ul class="layui-tab-title" style="text-align: center;">
                        <li class="layui-this">最新上架</li>
                        <li>热门商品</li>
                        <li>用户登录</li>
                    </ul>
                    <div class="layui-tab-content" style="height: 100%;">

                        <!--最新上架-->
                        <div class="layui-tab-item layui-show">

                            <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo"
                                style="width: 100%;border-radius: 5px;">
                                <li class="layui-nav-item"><a href="">最新商品</a></li>
                                <li class="layui-nav-item"><a href="">最新商品</a></li>
                                <li class="layui-nav-item"><a href="">最新商品</a></li>
                                <li class="layui-nav-item"><a href="">最新商品</a></li>
                                <li class="layui-nav-item"><a href="">最新商品</a></li>
                                <li class="layui-nav-item"><a href="">最新商品</a></li>
                                <li class="layui-nav-item"><a href="">最新商品</a></li>
                                <li class="layui-nav-item"><a href="">最新商品</a></li>
                            </ul>

                        </div>

                        <!--热门商品-->
                        <div class="layui-tab-item">


                            <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo"
                                style="width: 100%;border-radius: 5px;">
                                <li class="layui-nav-item"><a href="">热门商品</a></li>
                                <li class="layui-nav-item"><a href="">热门商品</a></li>
                                <li class="layui-nav-item"><a href="">热门商品</a></li>
                                <li class="layui-nav-item"><a href="">热门商品</a></li>
                                <li class="layui-nav-item"><a href="">热门商品</a></li>
                                <li class="layui-nav-item"><a href="">热门商品</a></li>
                                <li class="layui-nav-item"><a href="">热门商品</a></li>
                                <li class="layui-nav-item"><a href="">热门商品</a></li>
                            </ul>


                        </div>

                        <!--用户登录-->
                        <div class="layui-tab-item">
                            <div class="layui-form"
                                 style=" border:1px solid #009688;padding: 20px 30px;border-radius: 5px; background-color: #393D49;">
                                <form>
                                    <div class="layui-form-item">
                                        <blockquote class="layui-elem-quote"
                                                    style="padding: 10px;background-color: #393D49;color: white;height: 16px;line-height: 16x;">
                                            用户名
                                        </blockquote>
                                        <div class="layui-input-block" style="margin: 0;">
                                            <input type="text" name="userName" required lay-verify="required"
                                                   placeholder="请输入用户名" autocomplete="off" class="layui-input"
                                                   style="height: 50px;">
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <blockquote class="layui-elem-quote"
                                                    style="padding: 10px;background-color: #393D49;color: white;height: 16px;line-height: 16x;">
                                            密码
                                        </blockquote>
                                        <div class="layui-input-block" style="margin: 0;">
                                            <input type="password" name="userPass" required lay-verify="required"
                                                   placeholder="请输入密码" autocomplete="off" class="layui-input"
                                                   style="height: 50px;">
                                        </div>
                                    </div>
                                </form>
                                <div class="layui-form-item">
                                    <button id="TencentCaptcha" class="layui-btn layui-btn-lg layui-btn-normal"
                                            style="width: 100%;"
                                            data-appid="2083729790"
                                            data-cbfn="callback">验证
                                    </button>
                                </div>
                                <script>
                                    window.callback = function (res) {
                                        console.log(res)
                                        // res（用户主动关闭验证码）= {ret: 2, ticket: null}
                                        // res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}
                                        if (res.ret === 0) {
                                            $.ajax({
                                                type: "post",
                                                url: "/ajax/LoginVf",
                                                data: {
                                                    ticket: res.ticket,
                                                    randstr: res.randstr
                                                },
                                                success: function (data) {
                                                    if (data == 1) {
                                                        var capbtn = document.getElementById("TencentCaptcha");
                                                        capbtn.innerText = "验证通过";
                                                        capbtn.className = "layui-btn layui-btn-lg";
                                                    } else if (data == -1) {
                                                        var capbtn = document.getElementById("TencentCaptcha");
                                                        capbtn.innerText = "重新验证";
                                                    }
                                                }

                                            });

                                        }
                                    }
                                </script>
                                <div class="layui-form-item">
                                    <button type="button" style="width: 100%;" class="layui-btn layui-btn-lg" lay-submit
                                            lay-filter="Login">立即登录
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <hr class="layui-bg-green" style="margin-top:10px;">
        <div class="layui-col-md12">
            <blockquote class="layui-elem-quote" style="background-color:#eee;margin-top: 20px; "><h2>商品列表</h2>
            </blockquote>
            <div class="swiper-container swiper-container2">
                <div class="swiper-wrapper">
                    <div th:each="pd : ${pdlist}" class="swiper-slide swiper-p2">
                        <div class="img">
                            <a th:href="|/pd/${pd.pdId}|">
                                <img th:src="${pd.pdPic}"/>
                            </a>
                        </div>
                        <a th:href="|/pd/${pd.pdId}|">
                            <h4 class="title" th:text="${pd.pdName}">NIKE鞋</h4>
                        </a>
                        <h3 class="buyMoney"><i class="layui-icon" style="font-size:20px;">&#xe65e;</i>
                            <th:block th:text="${pd.pdPrice}"></th:block>
                        </h3>
                        <h3 class="delMoney" th:text="${pd.pdPrice2}">500</h3>
                        <div class="buyBtn">
                            <a class="layui-btn layui-btn-radius layui-btn-normal" th:href="|/pd/${pd.pdId}|">立即购买 <i
                                    class="layui-icon">&#xe602;</i></a>
                        </div>
                    </div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination swiper-p2"></div>
                <!-- Add Arrows -->
                <div class="swiper-button-next swiper-p2"></div>
                <div class="swiper-button-prev swiper-p2"></div>
            </div>
        </div>
    </div>
</div>
<div th:replace="include :: footer"></div>
<script>
    var swiper = new Swiper('.swiper-container1', {
        nextButton: '.swiper-button-next ',
        prevButton: '.swiper-button-prev',
        pagination: '.swiper-pagination',
        paginationType: 'progress',
        loop: true,
        autoplay: 2500
    });

    var pageWidth = window.screen.width;
    var viewNum = 1;
    if (pageWidth >= 1200) {
        viewNum = 3;
    } else if (pageWidth >= 720) {
        viewNum = 2;
    } else {
        viewNum = 1;
    }
    var swiper = new Swiper('.swiper-container2', {
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        slidesPerView: viewNum,
        centeredSlides: false,
        paginationClickable: true,
        paginationType: 'progress',
        spaceBetween: 30,
        loop: true,
        autoplay: 2500
    });
</script>
<script th:src="@{/static/layui/layui.js}"></script>
<script>
    //一般直接写在一个js文件中
    layui.use(['carousel', 'element', 'form', 'jquery'], function () {
        var carousel = layui.carousel;
        var element = layui.element;
        var form = layui.form;
        var $ = layui.jquery;
        //建造实例
        carousel.render({
            elem: '#test1'
            , width: '100%' //设置容器宽度
            , arrow: 'always' //始终显示箭头
            , anim: 'updown' //切换动画方式
        });
        form.on('submit(Login)', function (data) {
            var txcpttext = $("#TencentCaptcha").text();
            if (txcpttext != "验证通过") {
                $("#TencentCaptcha").click();
            }
            $.ajax({
                url: "/ajax/Login",
                type: "post",
                data: data.field,
                success: function (res) {
                    var txcpt = $("#TencentCaptcha");
                    if (res == -1) {
                        layer.alert('登录失败！账户或密码错误', {icon: 2});
                        txcpt.attr("class", "layui-btn layui-btn-lg layui-btn-normal");
                        txcpt.text("验证");
                    } else if (res == -2) {
                        $("#TencentCaptcha").click();
                    } else if (res == -3) {
                        layer.alert('登录失败！未知错误', {icon: 2});
                    } else if (res == 1) {
                        window.location.href = "/admin";
                    }
                }
            });
            return false;
        });
    });
</script>
</body>
</html>